import React,{Component} from "react";
import { DatePicker, message, Input, Select, Button, Checkbox } from 'antd';
import {withRouter} from "react-router-dom";
import CityTables from "../containers/cityTables";
import "../assets/stylesheets/searchBannerF.css";
import moment from 'moment';

const format = "YYYY-MM-DD";

class SearchBannerF extends Component{
    constructor(props){
        super(props);
        this.state={
            //如果父组件有传进来值将传进来的值合并，覆盖本来的值
            initalValues:this.props.initalValues?this.props.initalValues:{
                trip:"0",//默认单程
                goCity:"西安",
                toCity:"北京",
                goDate:moment().format(format),
                toDate:moment().format(format),
                classType:"0",
                checkChild: false,
                checkBaby: false,
            },
            UIstate:{
                goBoxDisplay:"none",
                toBoxDisplay:"none",
                babyTipsDisplay:"none",
            },
        }
    }
    componentDidMount(){
        let _this = this;
         //收起展开的输入框
        window.addEventListener("click",function(){
            _this.setState({UIstate:{..._this.state.UIstate, toBoxDisplay: "none", goBoxDisplay: "none"}});
        });
    }
    //出发地
    getGoCityNames = (citys) =>{ this.setState({goCitys:citys}); }
    getToCityNames = (citys) =>{ this.setState({toCitys:citys}); }
    onGoCityClick  = (e) =>{
        this.setState({UIstate:{...this.state.UIstate, toBoxDisplay: "none", goBoxDisplay: "block"}});
        //阻止本身冒泡
        e.nativeEvent.stopImmediatePropagation(); 
    }
    onToCityClick  = (e) =>{
        this.setState({UIstate:{...this.state.UIstate, toBoxDisplay: "block", goBoxDisplay: "none"}});
        e.nativeEvent.stopImmediatePropagation(); //阻止事件
    }
    onGoCityInput = (e) =>{
        let goBoxDisplay = "";
        e.target.value !== ""?goBoxDisplay ="none":goBoxDisplay = "block";
        this.setState({
            UIstate:{...this.state.UIstate, goBoxDisplay: goBoxDisplay},
            initalValues:{...this.state.initalValues, goCity: e.target.value}
        });
    }
    onToCityInput = (e) =>{
        let toBoxDisplay = "";
        e.target.value !== ""? toBoxDisplay = "none":toBoxDisplay = "block";
        this.setState({
            UIstate:{...this.state.UIstate, toBoxDisplay: toBoxDisplay},
            initalValues:{...this.state.initalValues, toCity: e.target.value}
        });
    }
    getGoCityName = (e) =>{
        this.setState({
            UIstate:{...this.state.UIstate, goBoxDisplay: "none"},
            initalValues:{...this.state.initalValues, goCity: e.target.innerText}
        });
    }
    getToCityName = (e) =>{
        this.setState({
            UIstate:{...this.state.UIstate, toBoxDisplay: "none"},
            initalValues:{...this.state.initalValues, toCity: e.target.innerText}
        });
    }
    exchangeCity = () =>{
        let goCity = this.state.initalValues.goCity,
            toCity = this.state.initalValues.toCity;
        this.setState({
            initalValues:{...this.state.initalValues, goCity: toCity, toCity: goCity}
        });
    }

    //选择日期
    onCalendarChange = (value, dateString) =>{
        this.setState({initalValues:{...this.state.initalValues, goDate:value.format(format)}}); 
    }
    //不能点击的日期
    disabledDate = (current) =>{
        let dates = this.getNowDate();  
        return  current.format('YYYY-MM-DD') < dates.ymd || current.format('YYYY-MM-DD') > dates.maxymd;
    }
    getNowDate = () =>{
        //获取当前日期的字符串和30天之后的日期字符串
        let date = moment(),//当前年月日，字符串
            nextDate = moment().add(30, 'd'),//30天后的日期
            res = {};
        res.ymd = date.format(format);
        res.maxymd = nextDate.format(format);
        return res;
    }
    //选择舱型
    onSelect = (value, opt)=>{ this.setState({initalValues:{...this.state.initalValues, classType: value}}); }
    handleChildChange = (e) =>{ 
        this.state.initalValues.checkChild?
        this.setState({initalValues:{...this.state.initalValues, checkChild: false}}):
        this.setState({initalValues:{...this.state.initalValues, checkChild: true}}); 
    }
    handleBabyChange = (e) =>{ 
        this.state.initalValues.checkBaby?
        this.setState({initalValues:{...this.state.initalValues, checkBaby: false}}):
        this.setState({initalValues:{...this.state.initalValues, checkBaby: true}}); 
    }
    //儿童票婴儿票的
    onMouseOver = () =>{ this.setState({UIstate:{...this.state.UIstate, babyTipsDisplay:"block"}}); }
    onMouseLeave = () =>{  this.setState({UIstate:{...this.state.UIstate, babyTipsDisplay:"none"}}); }
    // numberMillis 毫秒
    Sleep(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
        now = new Date();
        if (now.getTime() > exitTime)
        　　return;
        }
    }
    //查询,检查两个地点是否为空
    onSubmit = (e) =>{
        // 0:成功查询,1:出发地点不存在，2:到达地点不存在，3:出发地点为空，4:到达地点为空,5:出发地点和到达地点不能相同，6:出发日期为空7:返回日期为空。
        //所有字符去掉前后空格
        let state = 0;
        let values = this.state.initalValues;
        let regExp = /\s/g;
        // /^\s*(.*?)\s*$/;
        const path = {pathname: '/search', values: values};
        // if(e)e.preventDefault();//阻止刷新
        if(!values.goCity){ state = 3; }
        else{ 
            let goCity = values.goCity.replace(regExp, ""),
                go = this.goCityIn(goCity);
            if(!go){ state = 1; }
        }
        if(!values.toCity){ state = 4; }
        else{
            let toCity = values.toCity.replace(regExp, ""),
                to = this.toCityIn(toCity);
            if(!to){ state = 2; }
            else{ if(values.goCity === values.toCity){ state = 5; } }
        }
        if(!values.goDate){ state = 6; }
        if(values.trip === "1"){ if(!values.toDate){ state = 7; } }

        switch(state){
            case 0:
            {
                this.props.history.push(path);
            }break;
            case 1:
            message.error("出发地点不存在");break;
            case 2:
            message.error("到达地点不存在");break;
            case 3:
            message.error("出发地点为空");break;
            case 4:
            message.error("到达地点为空");break;
            case 5:
            message.error("出发地点和到达地点不能相同");break;
            case 6:
            message.error("出发日期为空");break;
            case 7:
            message.error("返回日期为空");break;
            default:
        }
        //阻止刷新
        if(state){ e.preventDefault(); }
        // this.Sleep(10000);
    }
    goCityIn = (city) =>{
        let goCitys = this.state.goCitys;
        let flag = false;
        for(let item in goCitys){
            if(goCitys[item].indexOf(city) !== -1){
                flag = true;
                break;
            }
        }
        return flag;
    }
    toCityIn = (city) =>{
        let toCitys = this.state.toCitys;
        let flag = false;
        for(let item in toCitys){
            if(toCitys[item].indexOf(city) !== -1){
                flag = true;
                break;
            }
        }
        return flag;
    }
    
    render(){
        const initalValues = this.state.initalValues;
        const UIstate = this.state.UIstate;
        return(
        <div id="index-search">
            <div className="s-box-bg"></div>
            <form onSubmit={this.onSubmit} method="get">
                <div className="s-box">
                    <h3>机 票 查 询</h3>
                    <div className="s-c1">
                        <div className="s-left">
                            <span>出发城市</span><Input id="goCity" name="goCity" value={initalValues.goCity} autocomplete="off" onInput={this.onGoCityInput} onClick={this.onGoCityClick}></Input>
                            <div id="go-city" style={{display:UIstate.goBoxDisplay}} >
                                <CityTables getCityName={this.getGoCityName} getCityNames={this.getGoCityNames}></CityTables>
                            </div>
                        </div>
                        <div className="img-block" onClick={this.exchangeCity}><img src={require("../assets/images/change.png")} className="change-icon"></img></div>
                        <div className="s-right">
                            <span>到达城市</span><Input id="toCity" name="toCity" value={initalValues.toCity} autocomplete="off" onInput={this.onToCityInput} onClick={this.onToCityClick}></Input>
                            <div id="to-city" style={{display:UIstate.toBoxDisplay}}>
                                <CityTables getCityName={this.getToCityName} getCityNames={this.getToCityNames}></CityTables>
                            </div>
                        </div>
                    </div>
                    <div className="s-c2">
                        <div className="s-left">
                            <span>出发日期</span>
                            <DatePicker id="goDate" value={moment(initalValues.goDate)} format={format} placeholder="出发日期"  disabledDate={this.disabledDate} onChange={this.onCalendarChange}></DatePicker>
                        </div>
                        <div className="s-right">
                            <span>舱型选择</span>
                            <Select  value={initalValues.classType} className="select" onSelect={this.onSelect}>
                                <Select.Option value="0">不限</Select.Option>
                                <Select.Option value="1">经济舱</Select.Option>
                                <Select.Option value="2">商务舱</Select.Option>
                                <Select.Option value="3">头等舱</Select.Option>
                            </Select>
                        </div>
                    </div>
                    <div className="s-c3">
                        <Checkbox id="child" value="child" name="child" onChange={this.handleChildChange}  checked={initalValues.checkChild}></Checkbox><span>带儿童</span>
                        <Checkbox id="baby" value="baby" name="baby" onChange={this.handleBabyChange}  checked={initalValues.checkBaby}></Checkbox><span>带婴儿</span>
                        <i id="baby-tips" onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>i</i>
                        <div id="baby-tips-box" style={{display:UIstate.babyTipsDisplay}}>
                            <p>儿童票/婴儿票的说明</p>
                            <dl>
                                <dt>婴儿票(14天-2周岁，不含2周岁)</dt>
                                <dd>婴儿票按照航线标准价格的10%不收机建及燃油费。(注：婴儿票无座，必须与成人购买同一舱等的机票)</dd>
                            </dl>
                            <dl>
                                <dt>儿童票(2周岁-12周岁，含2周岁)</dt>
                                <dd>儿童票价：航线标准价的50%，不收机建费，燃油费为成人的50%。</dd>
                            </dl>
                        </div>
                    </div>
                    <Button type="primary" htmlType="submit">查询</Button>
                </div>
            </form>
        </div>
        )
    }
}

export default withRouter(SearchBannerF);